<template>
	<view class="page-detail">
		<view class="main">
			<view class="title">车队名称: {{cdinfo.cdname}}</view>
			<view class="title">车队人数: {{items2.length}}</view>
			<view style="width: 100%;display: inline-block;">
				<view class="test">
					<text class="gs">预约日期：{{date1}}</text>
					<button class="xzbut" type="primary" @click="onShowDatePicker">选择日期</button>
				</view>
			</view>
			<u-calendar :show="show" mode="single" :maxCount="1" @confirm="confirm" @close="closes"></u-calendar>
			
			
			
			<view class="title">班次预定</view>
			
			<view class="info">
				<view class="info-item" :class="{atc:bccur==item.id}" v-for="(item,index) in bclist" :key="index"
					@click="addbanc(item.id)">
					<view style="font-size: 15px;font-weight: 600;">{{item.name1}}-{{item.name2}}</view>
				</view>
			</view>

			<view style="border: 1px solid #007AFF;">
				<view
					style="font-size: 15px;font-weight: 300;height: 40px;background-color: #3c77b7;line-height: 40px;">
					<view class="fl clf5">委托单号</view>
					<view class="fl clf5">货&#12288;&#12288;主</view>
					<view class="fl clf5">是否预约</view>
					<view class="fl clf5">查看司机</view>
				</view>

				<view v-for="(item, index) in items" :key="item.id" :class="{'bc3':hzsqid == item.id}"
					style="font-size: 15px;font-weight: 300;height: 40px;line-height: 40px;border: 1px solid;overflow: hidden;">
					<view class="fl" @click="addyuyopen(item)">{{item.orderons}}</view>
					<view class="fl" @click="opfen(item)">{{item.hzdwid}}</view>
					<view class="fl" :class="[{'bc2':item.yytype == 1},{'bc1':item.yytype != 1}]">
						{{item.yytype=='1'?'已预约':'未预约'}}
					</view>
					<view class="fl" @click="cksjinfo(item)">查看</view>
				</view>
			</view>



			<view v-show="xzinfo.yytype!=1" style="height: 60px;overflow: hidden;margin-top: 10px;">
				<view class="ls" :class="{lsitv:current1==1}" @click="leixin(1)">车辆总数</view>
				<view class="ls" :class="{lsitv:current1==2}" @click="leixin(2)">选择司机</view>
			</view>

			<view v-show="xzinfo.yytype==1 && xzinfo.ydata.rytype==1"
				style="height: 60px;overflow: hidden;margin-top: 10px;">
				<view class="ls" :class="{lsitv:current1==1}" @click="leixin(1)">车辆总数</view>
				<!-- <view class="ls" :class="{lsitv:current1==2}" @click="leixin(2)">选择司机</view> -->
			</view>

			<view v-show="xzinfo.yytype==1 && xzinfo.ydata.rytype==2"
				style="height: 60px;overflow: hidden;margin-top: 10px;">
				<!-- <view class="ls" :class="{lsitv:current1==1}" @click="leixin(1)">车辆总数</view> -->
				<view class="ls" :class="{lsitv:current1==2}" @click="editxzitem4(2)">选择司机</view>
			</view>




			<view class="title" v-show="current1==1 && xzinfo.yytype!=1">车辆总数</view>
			<view class="info" v-show="current1==1  && xzinfo.yytype!=1">
				<input type="text" style="font-size: 20px;" v-model="clnum" placeholder="" />
			</view>

			<view class="title" v-show="current1==1 && xzinfo.yytype==1">车辆总数</view>
			<view class="info" v-show="current1==1  && xzinfo.yytype==1">
				<input type="text" style="font-size: 20px;" v-model="clnum" placeholder="" />
			</view>
			<view v-show="xzinfo.yytype!=1 || xzinfo==''" class="call" @click="addyuy()">预约</view>
			<view v-show="xzinfo.yytype==1" class="call"  @click="edityuy()">修改预约</view>
			<tabBar :pagePath="'/pages/shoquan/detail'"></tabBar>
		</view>
		<view v-show="opens" class="ck" style="border: 1px solid #3c77b7;">
			<view style="margin-bottom: 10px;overflow: hidden;height: 40px;background-color: #3c77b7;">
				<view @click="gbopen"
					style="width: 50px;height: 40px;font-size: 20px;
					color: #ffffff;float: right;line-height: 40px;">关闭
				</view>
			</view>
			<view class="av">委托单号:{{openinfo.orderons}}</view>
			<view class="av">货&#12288;&#12288;主:{{openinfo.hzdwid}}</view>
			<view class="av">货&#12288;&#12288;名:{{openinfo.hname}}</view>
			<view class="av">船&#12288;&#12288;名:{{openinfo.shipnam}}</view>
			<view class="av">保税区授权:{{openinfo.swg==1?'授权':'未授权'}}</view>
			<view class="av">航&#12288;&#12288;次:{{openinfo.hc}}</view>
			<view class="av">授权时间:{{openinfo.sqendtime}}-{{openinfo.sqstartime}}</view>
		</view>

		<view v-show="editxzsj" class="ck" style="border: 1px solid #3c77b7;">
			<view style="margin-bottom: 10px;overflow: hidden;height: 60px;">
				<view class="bt1" @click="quanxuan">全选</view>
				<view class="bt1" style="background-color: #ff0000;" @click="editgb()">关闭</view>
			</view>
			<view style="margin-top: 15px;overflow:auto;height: 370px;">
				<view class="bt2" :class="{bt2itv:item.checked==true}" v-for="item in item4" @click="eitsiji(item)">
					{{item.cname}}
				</view>
			</view>
			<view class="fw" @click="qreditsz">确定选择</view>
		</view>

		<view v-show="xzsj" class="ck" style="border: 1px solid #3c77b7;">
			<view style="margin-bottom: 10px;overflow: hidden;height: 60px;">
				<view class="bt1" @click="quanxuan">全选</view>
				<view class="bt1" style="background-color: #ff0000;" @click="qxsj">关闭</view>
			</view>
			<view style="margin-top: 15px;overflow:auto;height: 370px;">
				<view class="bt2" :class="{bt2itv:item.checked==true}" v-for="item in items2" :key="item.id" @click="addsiji(item)">
					{{item.cname}}
				</view>
			</view>
			<view class="fw" @click="qrsz">确定选择</view>
		</view>


		<view v-show="ck" class="ck" style="border: 1px solid #3c77b7;">
			<view
				style="background-color: #3c77b7;height: 40px;line-height: 40px;text-align: center;font-size: 20px;color: #ffffff;">
				司机列表</view>
			<view style="margin-top: 15px;overflow:auto;height: 300px;">
				<view class="bt2" v-for="(item,index) in items3" :key="index">{{item.cname}} </view>
			</view>
			<view @click="qxck"
				style="background-color: #ff0000;height: 40PX;line-height: 40px;text-align: center;font-size: 20px;color: #ffffff;">
				关闭</view>
		</view>
		
	<!-- 	<uni-calendar  class="ck"
		     :insert="showPicker"
		     :lunar="true" 
		     :start-date="date"
		     :end-date="'2025-12-30'"
		     @change="change1"
		/> -->
	</view>
</template>

<script>
	import getDateTime from '@/common/getdateTime.js'
	export default {
		data() {
			return {
				id: '',
				bclist: [],
				imglist: [],
				cdlists: [],
				cdinfo: '',
				wtdh: '',
				bccur: '',
				bcinfo: '',
				showPicker: false,
				date: new Date().toISOString().slice(0, 10),
				date1: new Date().toISOString().slice(0, 10),
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				range: ['2019/01/01', '2019/01/06'],
				rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
				type: 'rangetime',
				value: '',
				uinfo: '',
				items: [],
				current: '',
				items1: [{
						value: '1',
						name: '车辆总数',
						checked: 'true'
					},
					{
						value: '2',
						name: '选择司机',

					}
				],
				current1: '',
				clnum: '',
				rytype: 1,
				hzsqid: '',
				items2: [],
				xzsj: false,
				qx: false,
				ck: false,
				items3: [],
				opens: false,
				openinfo: '',
				xzinfo: '',
				item4: [],
				editxzsj: false	,
				cksj:'',
				show:false,
			}
		},
		onLoad(op) {
			this.date = getDateTime.dateTimeStr('y-m-d')
			this.date1 = getDateTime.dateTimeStr('y-m-d')
			this.getuserinfo();
		},
		methods: {
			closes(){
				this.show = false
			},
			confirm(e){
				console.log(e)
				this.date1 = e[0]
				// this.date2 = e[1]
				// this.addinfo.startime = e[0]
				// this.addinfo.endtime = e[1]
				this.show = false
			},
			change1(e){
				console.log(e);
				this.date1 = e.fulldate
				this.getsqhzorderon();
				this.showPicker = false
				
			},
			editxzitem4() {
				this.current1 = 2
				this.editxzsj = true
				let xzinfo = this.xzinfo
				this.getorderonbdsjs(xzinfo);
				
			},
			async getorderonbdsjs(e){
				//数组改变 进行循环改变
				let data = {
					yid:e.ydata.id
				}
				//查询当前预约单号的绑定记录
				let res = await this.$api.getorderonbdsjs(data)
				console.log(res.data.data)
				this.item4 = res.data.data
			},
			qreditsz(){
				this.editxzsj = false
			},
			editgb() {
				this.editxzsj = false
			},

			addyuyopen(e) {
				console.log(e)
				this.hzsqid = e.id
				this.xzinfo = e
				if (e.yytype == 1) {
					this.clnum = e.ydata.clnum
				}
			},
			opfen(e) {
				this.opens = true
				this.openinfo = e
			},
			gbopen() {
				this.opens = false
			},
			leixin(e) {
				this.current1 = e
				this.rytype = e
				if (e == 1) {
					this.xzsj = false
				} else {
					this.xzsj = true
				}
			},
			async cksjinfo(e) {
		
				if (e.yytype == 1) {
					this.ck = true
					let data = {
						yid: e.ydata.id,
					}
					//查询当前预约单号的绑定记录
					let res = await this.$api.getorderonbdsj(data)
					console.log(res.data.data)
					if (res.data.code == 0) {
						this.items3 = res.data.data
					}
				} else {
					this.items3 = []
				}
			},
			qxck() {
				this.ck = false
			},
			quanxuan() {
				if (this.qx == true) {
					var items2 = this.items2
					for (var i = 0, lenI = items2.length; i < lenI; ++i) {
						const item = items2[i]
						this.$set(item, 'checked', false)
					}
					this.qx = false
				} else {
					var items2 = this.items2
					for (var i = 0, lenI = items2.length; i < lenI; ++i) {
						const item = items2[i]
						this.$set(item, 'checked', true)
					}
					this.qx = true
				}
			},
			qrsz() {
				this.xzsj = false
			},
			addsj() {
				if (this.xzsj == true) {
					this.xzsj = false
				} else {
					this.xzsj = true
				}
			},
			qxsj() {
				this.xzsj = false
			},
	
			addsiji(e) {
				var items = this.items2,
					values = e;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (item.id == e.id) {
						if (item.checked == true) {
							this.$set(item, 'checked', false)
						} else {
							this.$set(item, 'checked', true)
						}
					}
				}
			},
			eitsiji(e) {
				console.log(e)
				var items = this.item4,
					values = e;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (item.id == e.id) {
						if (item.checked == true) {
							this.$set(item, 'checked', false)
						} else {
							this.$set(item, 'checked', true)
						}
					}
				}
			},


		
		


			async getsqhzorderon() {
				let data = {
					cdid: this.uinfo.cdid,
					times: this.date1,
					bcid: this.bccur
				}
				let res = await this.$api.getsqhzorderon(data)
				if (res.data.code == 0) {
					this.items = res.data.data
					// this.items1 =  res.data.data
				}
			},
			async getuserinfo() {
				let data = {
					id: uni.getStorageSync('uid')
				}
				let res = await this.$api.getuserinfo(data)
				console.log(res.data.code)
				if (res.data.code == 0) {
					uni.setStorageSync('uid', res.data.data.id);
					uni.setStorageSync('cdtype', res.data.data.cdtype);
					this.uinfo = res.data.data
					this.init()
					this.getcdweitdel();
					this.getbancitimedqs()

				}
			},
			async getcdweitdel(){
				let data = {
					cdid:this.uinfo.cdid
				}
				let res = await this.$api.getcdweitdel(data)
			},
			
			
			async getbancitimedqs() {
				let res = await this.$api.getbancitimedqs()
				// console.log(res.data)
				this.bccur = res.data.id
				this.getsqhzorderon()
			},
			async addyuy() {
				var that = this;
				let xzsjidall = []
				that.items2.forEach(item => {
					if (item.checked == true) {
						// console.log(item)←————重点 获取选中的值放到数组中
						xzsjidall.push(item.id);
					}
				});
				let data = {
					uid: uni.getStorageSync('uid'),
					cdid: this.uinfo.cdid,
					datetime: this.bccur,
					times: this.date1,
					xzsjidall: xzsjidall,
					rytype: this.rytype,
					hzsqid: this.hzsqid,
					clnum: this.clnum,
					hid:this.xzinfo.huids
				}
				console.log(that.items2)
				console.log(data)
				let res = await this.$api.addyuy(data)
				console.log(res.data)
				if (res.data.code == 0) {
					//log
					let data1 = {
						uid:uni.getStorageSync('uid'),
						msg:'车队'+this.cdinfo.cdname+'预约了委托单号'+this.xzinfo.orderons+'时间是'+this.date1,
						lv:1,
						type:2,
						cz:JSON.stringify(data)
					}	
					await this.$api.addlogs(data1)	
					
					uni.navigateTo({
						url: '/pages/shoquan/appoint'
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
				}

			},
			async edityuy(){
					var that = this;
					var that = this;
					let xzsjidall = []
					that.item4.forEach(item => {
						if (item.checked == true) {
							// console.log(item)←————重点 获取选中的值放到数组中
							xzsjidall.push(item.id);
						}
					});
					let data = {
						uid: uni.getStorageSync('uid'),
						yid:this.xzinfo.ydata.id,
						xzsjidall: xzsjidall,
						clnum: this.clnum
					}
					console.log(data)
					let res = await this.$api.edityuy(data)
					if (res.data.code == 0) {
						//log
						let data1 = {
							uid:uni.getStorageSync('uid'),
							msg:'车队'+this.cdinfo.cdname+'修改预约了委托单号'+this.xzinfo.orderons+'时间是'+this.date1,
							lv:1,
							type:2,
							cz:JSON.stringify(data)
						}	
						await this.$api.addlogs(data1)
						
						uni.navigateTo({
							url: '/pages/shoquan/appoint'
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
			},
			
			
			
			addbanc(e) {
				console.log(e)
				this.bccur = e;
				this.getsqhzorderon();
			},
			onShowDatePicker() { //显示
				this.show = true
				// this.showPicker = true;
				
			},
		
			async init() {
				let res = await this.$api.getbanci()
				console.log(res)
				this.bclist = res.data.data
				let data = {
					cdid: this.uinfo.cdid
				}
				let res1 = await this.$api.getcdlist({
					cdid: this.uinfo.cdid,
					cdtype: 1
				})
				console.log(res1.data.data)
				// this.cdlists = res1.data.data;
				this.items2 = res1.data.data;
				let res2 = await this.$api.getinfo({
					id: this.uinfo.cdid
				})
				console.log(res2.data.data)
				this.cdinfo = res2.data.data;
			},


		}
		// ,components: {
		// 	uniCalendar
		// }
	}
</script>

<style lang="scss">
	.uni-list-cell {
		justify-content: flex-start
	}

	.page-detail {
		// padding: 20upx;
		padding-bottom: 120upx;
		background-color: #ffffff;

		.swiper-item {
			image {
				width: 100%;
				height: 400upx;
			}
		}

		.main {
			padding: 10upx;
			position: relative;

			.icon-collect {
				position: absolute;
				width: 50upx;
				height: 50upx;
				top: 24upx;
				right: 40upx;
			}
		}

		.title {
			font-size: 40upx;
			font-weight: 600;
			margin-top: 40upx;
			margin-bottom: 20upx;
			color: #3c77b7;
		}

		.tag {
			margin-top: 20upx;
			margin-bottom: 30upx;

			.tag-item {
				padding: 10upx 20upx;
				background-color: rgb(186, 222, 252);
				color: rgb(33, 150, 243);
				margin-right: 20upx;
			}
		}

		.info {
			padding: 30upx 0;
			display: flex;
			border-top: 1upx solid #dedede;
			border-bottom: 1upx solid #dedede;
			margin-bottom: 20upx;

			.info-item {
				width: 30upx;
				height: 90upx;
				line-height: 90upx;
				padding: 3upx;
				margin-left: 5upx;
				border: 1px solid #3c77b7;
				flex: 0 0 33.33%;
				text-align: center;
				border-radius: 10px;
			}
		}

		.note {
			.note-item {
				display: flex;
				color: #666;
				display: flex;
				align-items: center;
				margin-bottom: 20upx;

				image {
					width: 40upx;
					height: 40upx;
					margin-right: 10upx;
				}

				.n-left {
					width: 240upx;
					display: flex;
					align-items: center;

					text {
						margin-right: 0;
					}
				}
			}
		}

		.eqment {
			display: flex;
			flex-wrap: wrap;

			.eq-item {
				flex: 0 0 20%;
				flex-direction: column;

				image {
					width: 100upx;
					height: 100upx;

				}
			}
		}

		.fix-foot {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;

		}

		.fw {
			height: 40px;
			text-align: center;
			line-height: 40px;
			margin: 0 auto;
			margin-top: 30upx;
			background-color: #3c77b7;
			color: #ffffff;
			font-size: 18px;
			font-weight: 600;
		}

		.call {
			background-color: #3c77b7;
			color: #fff;
			width: 300px;
			height: 50px;
			margin: 0 auto;
			margin-bottom: 20px;
			margin-top: 20px;
			line-height: 50px;
			text-align: center;
			border-radius: 10px;
		}

		.lf {
			margin-left: 45%;
		}

		.atc {
			background-color: #3c77b7;
		}

		.gs {
			margin-top: 20upx;
			margin-bottom: 20upx;
			font-size: 20px;
			display: block;
			float: left;
			color: #3c77b7;
		}
	}

	.fl {
		float: left;
		width: 25%;
		font-size: 20px;
		text-align: center;
		border: 1px solid #000000;
		line-height: 40px;
		min-height: 40px;
		overflow: hidden;

		//margin-left: 10upx;
	}

	.ck {
		z-index: 999;
		-moz-opacity: 1;
		opacity: 1;
		// border: 1px solid #000000;
		position: fixed;
		background-color: #ffffff;
		width: 90%;
		border-radius: 5px;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		//padding: 10upx;
	}

	.ls {
		width: 40%;
		height: 50px;
		float: left;
		line-height: 50px;
		margin: 10px 16px;
		text-align: center;
		border: 1px solid #3c77b7;
		font-size: 20px;
		border-radius: 10px;
	}

	.lsitv {
		background-color: #3c77b7;
		color: #ffffff;
	}

	.bt1 {
		float: left;
		color: #ffffff;
		font-size: 18px;
		font-weight: 600;
		width: 43%;
		background-color: #3c77b7;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border: 1px solid #3c77b7;
		border-radius: 10px;
		margin: 10px;
	}

	.bt2 {
		float: left;
		border: 1px solid #3c77b7;
		height: 50px;
		line-height: 50px;
		text-align: center;
		width: 28%;
		margin-left: 10px;
		border-radius: 10px;
		font-size: 20px;
		overflow: hidden;
		margin-top: 4px;
	}

	.bt2itv {
		background-color: #3c77b7;
	}

	.bc1 {
		background-color: #ffff00;

	}

	.bc2 {
		background-color: #ff5500;
	}

	.bc3 {
		background-color: #3c77b7;
	}

	.clf5 {
		color: #ffffff;
		font-weight: 600;
	}

	.xzbut {
		width: 120px;
		line-height: 30px;
		float: left;
		margin-left: 10px;
		font-size: 20px;
		height: 30px;
		color: #ffffff;
		background-color: #3c77b7;
	}
	.av{
		height: 40px;line-height: 40px;font-size: 20px;
	}
</style>
